<template>
  <div>
    <div class="my-2 flex items-center text-sm">
      <el-radio-group v-model="isReader" class="ml-4">
        <el-radio :value="false" :label="false">编辑式审批</el-radio>
        <el-radio :value="true" :label="true">查阅式审批</el-radio>
      </el-radio-group>
    </div>
    <div class="titlecla"><span style="color: #f67979; font-wight: blod">*</span>选择部门及用户</div>
    <div class="mianclass">
      <tree @handleCheckTree="handleCheckTree"></tree>
      <el-table
        :header-cell-class-name="headerCellClass"
        ref="radioSubmit"
        v-loading="loading"
        :data="listUserarr"
        height="400px"
        border
        @selection-change="selectlistUserarr"
        @select="selectTable"
      >
        <el-table-column type="selection" label="全选" width="50" />
        <el-table-column label="用户" prop="userName"> </el-table-column>
        <el-table-column label="部门" prop="organizationFullName"> </el-table-column>
      </el-table>
    </div>
    <div class="calssdivsub">
      <el-button type="primary" @click="submitForm()" style="width: 80px">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { selectUserByOrganizationIdapi, workflowExamineMaintainPlanapi } from "@/api/main/api.js";
import axios from "axios";
import tree from "@/components/planModle/tree.vue";
const props = defineProps({
  submitCheckbox: {
    type: Object,
    default: {},
  },
});
const emit = defineEmits(["parentselectChangeionProcess"]);
import { reactive, ref, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const isReader = ref(true);
const data = reactive({
  listUserarr: [],
  selectlistUserList: [],
  nextNodes: [],
  radioSelecttabList: {},
  radioSelectlistUserList: [],
});
const { radioSelectlistUserList, radioSelecttabList, nextNodes, selectlistUserList, listUserarr } = toRefs(data);

function getList() {}
getList();
const radioSubmit = ref("");
function selectTable(select, row) {
  if (props.submitCheckbox.selectType == "radio") {
    // 清除所有勾选项的操作;
    radioSelecttabList.value = {};
    radioSubmit.value.clearSelection();
    if (select.length == 0) {
      return;
    }
    radioSubmit.value.toggleRowSelection(row, true);
    radioSelectlistUserList.value = row;
  }
}
function submitForm() {
  if (selectlistUserList.value.length == 0) {
    return proxy.$modal.msgError("请选择人员");
  }
  emit("parentselectChangeionProcess", radioSelectlistUserList.value, isReader.value, selectlistUserList.value);
}
function selectlistUserarr(row) {
  selectlistUserList.value = row;
}

//树结构的选择单选
function handleCheckTree(data) {
  selectUserByOrganizationIdapi({ organizationId: data.organizationId }).then((res) => {
    if (res.code == 200) {
      listUserarr.value = res.data;
    }
  });
}
function headerCellClass(row) {
  if (props.submitCheckbox.selectType == "radio") {
    if (row.columnIndex === 0) {
      return "tabradio";
    }
  }
}
</script>

<style lang="scss" scoped>
.mianclass {
  display: flex;
}
.titlecla {
  height: 30px;
  background-color: #4080ff;
  color: #fff;
  line-height: 30px;
  padding-left: 20px;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.calssdivsub {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.divzanwu {
  width: 500px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.tabradio .cell) {
  visibility: hidden;
}
</style>
